<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 响应式数据
const username = ref('');
const password = ref('');
const phone = ref('');
const image = ref('');
const state = ref(true); // 状态默认 true

// 其他字段
const email = ref('');
const qq = ref('');
const address = ref('');
const photo = ref(null);

// 处理照片上传
const handlePhotoUpload = (event) => {
  const file = event.target.files[0];
  if (file.size > 2 * 1024 * 1024) { // 2MB 文件大小限制
    ElMessage.error('文件大小超过 2MB，请选择小于 2MB 的图片');
    return;
  }
  photo.value = file;
  image.value = file.name; // 假设你上传后会保留图片名称或路径
};

// 提交更新请求的函数
const submitUpdate = () => {
  // 简单验证
  if (!username.value) {
    ElMessage.error('请填写所有必填项！');
    return;
  }

  // 构建 JSON 数据
  const updateData = {
    username: username.value,
    password: password.value,
    image: image.value, // 照片（可为空）
    phone: phone.value,
    state: state.value
  };

  // 发送 POST 请求
  axios.post('http://localhost:8080/user/update', updateData)
      .then(response => {
        if (response.data.code === 1) {
          ElMessage.success('用户信息更新成功！');
        } else {
          ElMessage.error(`更新失败: ${response.data.msg}`);
        }
      })
      .catch(error => {
        console.error('更新失败:', error);
        ElMessage.error('更新失败，请稍后重试。');
      });
};
</script>

<template>
  <div class="document">
    <h2>高级用户申请</h2>
    <div class="instructions">
      <p>尊敬的用户：</p>
      <p>感谢您对CSDN博客的支持！...</p>
    </div>

    <div class="form">
      <h4>高级用户申请表：</h4>

      <div class="form-group">
        <label for="username">真实姓名：</label>
        <input type="text" id="username" v-model="username" placeholder="请输入您的真实姓名">
      </div>

      <div class="form-group">
        <label for="photo-upload">上传照片：</label>
        <input type="file" id="photo-upload" @change="handlePhotoUpload">
        <span>{{ photo ? photo.name : '未上传任何照片' }}</span>
        <p class="hint">图片最大可支持2MB...</p>
      </div>

      <div class="form-group">
        <label for="email">E-mail：</label>
        <input type="text" id="email" v-model="email" placeholder="请输入您的邮箱">
      </div>

      <div class="form-group">
        <label for="phone">手机：</label>
        <input type="text" id="phone" v-model="phone" placeholder="请输入您的手机号">
      </div>

      <div class="form-group">
        <label for="qq">QQ：</label>
        <input type="text" id="qq" v-model="qq" placeholder="请输入您的QQ号">
      </div>

      <div class="form-group">
        <label for="address">邮寄地址：</label>
        <input type="text" id="address" v-model="address" placeholder="请输入您的邮寄地址">
      </div>

      <div class="form-group">
        <input type="submit" value="提交申请" id="submit" @click="submitUpdate">
      </div>
    </div>
  </div>
</template>

<style scoped>
.document {
  width: 1000px;
  margin: 50px auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  font-family: 'HarmonyOS Sans SC', Arial, sans-serif;
}

h2 {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.instructions {
  background-color: #f9f9f9;
  border-left: 4px solid #4CAF50;
  padding: 15px;
  margin-bottom: 30px;
}

.instructions p {
  margin: 0 0 10px;
  color: #555;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
  font-size: 14px;
  width: 100%;
  padding: 10px;
  height: 25px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #4CAF50;
  outline: none;
}

.form-group input[type="button"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-group input[type="button"]:hover {
  background-color: #45a049;
}

.form-group span {
  display: block;
  margin-top: 5px;
  color: #888;
}

.form-group .hint {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

textarea {
  height: 100px;
  resize: none;
}

#submit {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  transition: background-color 0.3s ease;
}

#submit:hover {
  background-color: #45a049;
}

@media (max-width: 600px) {
  .document {
    padding: 10px;
  }

  h2 {
    font-size: 20px;
  }

  .form-group input[type="text"],
  .form-group select,
  .form-group textarea {
    font-size: 14px;
    padding: 8px;
  }

  #submit {
    font-size: 14px;
    padding: 10px;
  }
}
</style>